<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>【{{ cornerData.name }}】【{{ sectionData.section_name }}】水平分布</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <div class="point-list-line">
          <div class="corner-point-list" v-for="(item,index) in assesslist">
            <div class="corner-point-list-l">
              {{ index + 1 }}.{{ item.assess.title }}
            </div>
            <div class="corner-point-list-r">
              <div class="corner-point-list-r-option" v-for="child in item.fraction"
                   @click="showStudentDetail(child)">
                <span>{{ child.name }}: </span><span class="point-number">{{child.number || 0}}</span> <i>人</i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">确定</el-button>
      </div>
    </div>
    <sectionStudentList :visible.sync="studentVisible" :cornerData="cornerData"
                        :sectionData="sectionData" :levelData="levelData"></sectionStudentList>
  </div>
</template>

<script>
import {cornerBrandDetail} from "@/api/admin/corner"
import sectionStudentList from "./sectionStudentList";

export default {
  props: ['visible', 'sectionData', 'cornerData'], // recruitmentType examine 审核
  components: {sectionStudentList},
  data() {
    return {
      dialogVisible: false,
      studentVisible: false,
      assesslist: [],
      levelData: ''
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.InitFn()
      } else {
        this.assesslist = []
      }
    }
  },
  created() {

  },
  methods: {
    // 初始化
    InitFn() {
      cornerBrandDetail({cate_id: this.cornerData.id, section_id: this.sectionData.id}).then(res => {
        console.log('res:', res)
        // evaluate_id: 192
        // id: 393
        // items_id: 2
        // number: 4
        // section_id: 2
        let point_ = {}
        for (let item of res.evaluate) {
          if (item.section_id === this.sectionData.id) {
            if (!point_[item.items_id]) {
              point_[item.items_id] = {}
            }
            point_[item.items_id][item.evaluate_id] = {number:item.number, id: item.id}
          }
        }
        for (let item of res.assess) {
          if (item.fraction) {
            item.fraction = JSON.parse(item.fraction)
            if (point_[item.items_id]) {
              for (let fra_ of item.fraction) {
                fra_.number = 0
                if (point_[item.items_id][fra_.id]) {
                  fra_.number = point_[item.items_id][fra_.id].number
                  fra_.logId = point_[item.items_id][fra_.id].id
                }
              }
            }
          }
        }
        this.assesslist = res.assess
      })
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    showStudentDetail(item) {
      if(item.number){
        this.levelData = this.getJson(item)
        this.studentVisible = true
      }else{
        this.$message.warning('没有可查看的记录');
      }
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 900px;
  max-height: 90%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.corner-point-list {
  display: flex;
  border-bottom: 1px solid #ddd;
  padding: 10px 5px;
  cursor: pointer;
}

.corner-point-list:last-child {
  border: none;
}

.corner-point-list:hover {
  background: #99d3ff;
}

.corner-point-list-l {
  flex: 1;
}

.corner-point-list-r {
  width: 500px;
  display: flex;
  align-items: center;
}

.corner-point-list-r-option {
  flex: 1;
  text-align: center;
  border-right: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.corner-point-list-r-option:last-child {
  border-right: none;
}

.corner-point-list-r-option:hover {
  text-decoration: underline;
  font-weight: bold;
}
.corner-point-list-r-option i{
  font-size: 12px;
  color: #999;
  font-style: normal;
}
.corner-point-list-r-option span.point-number{
  color: #006dcd;
  font-size: 16px;
  margin-left: 3px;
}
</style>

